
<html><head>
	<meta charset="utf-8">
	<title>双向列表</title>
	<link type="text/css" rel="stylesheet" href="双向列表.css"/>  
</head>
<body>
	<div class="container">
		<ul class="data-list" id="lList">
			<li>Ex-Wives1</li>
			<li>No Way</li>
			<li>Don't Lose Ur Head</li>
			<li>Heart of Stone</li>
			<li>Haus of Holbein</li>
			<li>Get Down</li>
			<li>All You Wanna Do</li>
			<li>I Don't Need Your Love</li>
		</ul>
		
		<div class="button-box">
			<button type="button" name="button" id="add">添 加</button>
			<button type="button" name="button" id="remove">删 除</button>
		</div>
		<ul class="data-list" id="rList">
 
		</ul>
		
	</div>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// $ ()可以是$ (expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。 
			//比如：$ ("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。
			var lList = $("#lList");
			var llList = document.getElementById("lList");
			var rList = $("#rList");
			var items = $(".data-list li");
			for(var i = 0;i<items.length;i++){
				items[i].onclick = itemsclick;
				items[i].ondblclick = itemsdblclick;
			}
            
			function itemsdblclick(){
				if (this.parentNode === llList) {
					rList.append(this);
				}else{
					lList.append(this);
				}
			}
			// 点击的函数反应
			function itemsclick(){
				var classname = this.className;
				if(classname === "selected"){
					this.className = "";
				}else{
					this.className="selected";
				}
			}
			//移动操作，看看是+还是-
			function itemsMove(){
				var items = $(".data-list li.selected");
				for(var i = 0;i<items.length;i++){
					if(this.id === "add"){
						rList.append(items[i]);
					}else{
						lList.append(items[i]);
					}
				}
			}
			$("#add").on("click",itemsMove);
			$("#remove").on("click",itemsMove);
		});
	</script>
 
</body></html>


